import { Meta, Story, Canvas, Source } from '@storybook/addon-docs'
import { Dropdown } from '@v-uik/dropdown'
import { Button } from '@v-uik/button'
import {
  createTitle,
  COMPONENTS,
  createStory,
  DocsAlert,
} from '../../docs/showroom/config'
import { Basic } from './examples/Basic'
import { CloneElement } from './examples/CloneElement'
import RawBasic from '!!raw-loader!./examples/Basic'
import RawCloneElement from '!!raw-loader!./examples/CloneElement'

export const story = createStory(Basic, RawBasic)

<Meta
  title={createTitle([COMPONENTS.utility, 'Dropdown', 'Dropdown'])}
  component={Dropdown}
/>

<Story
  name="Dropdown"
  parameters={{
    ...story.parameters,
    docs: {
      disable: true,
    },
  }}
>
  {story.component}
</Story>

# Dropdown

Компонент `Dropdown` является более функциональной оберткой `Popup`.
Компонент-потомок `Dropdown` становится триггером и ориентиром отображения `Popup` по действию, переданному в свойство
`action`: hover, click, contextMenu.
Содержимое компонента `Popup` передается в свойство `content`.

## import

```ts
import { Dropdown } from '@v-uik/base'
```

или

```ts
import { Dropdown } from '@v-uik/dropdown'
```

<DocsAlert type="warning">
  Компонент использует <code>React.CloneElement</code>. Перейдите к разделу{' '}
  <a href="#механизм-reactcloneelement">Механизм React.CloneElement</a> чтобы
  узнать подробнее
</DocsAlert>

## Dropdown, выпадающий при на нажатии на кнопку

Его доступность можно настраивать аналогично компонентам Popup и Tooltip через `aria` атрибуты

<Canvas withSource="none">
  <Basic />
</Canvas>

<Source language="tsx" code={RawBasic} />

## Механизм `React.CloneElement`

Компонент `Dropdown` использует механизм `React.CloneElement` для передаваемого `children` и ожидает в качестве `children` один `Child`.
Для него он задает следующие свойства:

| Свойство        | Описание                                                                                           |
| --------------- | -------------------------------------------------------------------------------------------------- |
| `key`           | Значение всегда равно `trigger`                                                                    |
| `ref`           | Ссылка на DOM-узел                                                                                 |
| `onContextMenu` | Функция обратного вызова, необходимая для работы `Dropdown`                                        |
| `onKeyDown`     | Функция обратного вызова, которая обрабатывает нажатия клавиш и вызывает обработчики `Dropdown`    |
| `onMouseEnter`  | Функция обратного вызова, которая обрабатывает события мыши и вызывает обработчики `Dropdown`      |
| `onMouseLeave`  | Функция обратного вызова, которая обрабатывает события мыши и вызывает обработчики `Dropdown`      |
| `onClick`       | Функция обратного вызова, которая обрабатывает нажатие на кнопку и вызывает обработчики `Dropdown` |

`Dropdown` накладывает ограничения на количество компонентов в `children`, так как он ожидает только один `Child`

Ниже представлен пример как передать в качестве `children` пользовательскую обертку над компонентом `Button`

<Canvas withSource="none">
  <CloneElement />
</Canvas>

<Source language="tsx" code={RawCloneElement} />

## Связанные компоненты

- [Popup](?path=/docs/вспомогательные-компоненты-popup-popup--popup)
